<% running_class = time_entry.running? ? "border-success/70" : "border-base-100/80" %>
<div id="<%= dom_id(time_entry) %>" class="<%= running_class %> border border-base-300 rounded-box border bg-base-100 flex flex-col md:flex-row gap-8 relative peer peer-exists tour--time-entry">
  <% if time_entry.running? %>
    <span class="absolute left-[-7px] flex" style="width:16px; height:16px; top: calc(50% - 6px)">
      <span class="relative  inline-flex rounded-full bg-base-100 text-success" style="left:-2px;top:-2px;font-size:16px">
        <i class="animate-spin ti ti-clock"></i>
      </span>
      <span style='width:16px;height:16px;left: -2px; top:-2px;' class="animate-ping absolute inline-flex rounded-full bg-success"></span>
    </span>
  <% end %>
  <div class="p-6 space-y-4 grow">
    <div class="flex items-center justify-between">
      <div class="flex flex-col gap-1">

        <%= link_to project_issues_path(time_entry.project), class: "link link-hover group flex items-center gap-2 text-sm uppercase font-semibold opacity-60", data: { turbo_frame: "_top" } do %>
          <%= time_entry.project.name %>
          <span class="hidden group-hover:block">
            <i class="opacity-70 ti ti-arrow-up-right"></i>
          </span>
        <% end %>

        <% if time_entry.issue.present? %>
          <%= link_to visualization_issue_path(time_entry.project.default_visualization, time_entry.issue), class: "link link-hover text-sm group font-medium flex items-center gap-2", data: { turbo_frame: "_top" } do %>
            <%= time_entry.issue.title %>
            <span class="hidden group-hover:block">
              <i class="opacity-70 ti ti-arrow-up-right"></i>
            </span>
          <% end %>
        <% end %>
      </div>
    </div>
    <div class="text-sm border-l-2 <%= time_entry.description.present? ? 'border-base-content' : 'border-base-content/60' %> italic  text-wrap break-all text-base-content py-2 pl-2 max-w-full">
      <% if time_entry.description.blank? %>
        <p class="italic text-xs"><%= t(".no_description") %></p>
      <% else %>
        <%= simple_format(h(time_entry.description)) %>
      <% end %>
    </div>
  </div>

  <div class="md:max-w-24 text-4xl shrink-0 tabular-nums flex items-center justify-center <%= time_entry.running? ? "text-success font-base animate-pulse" : "text-base-content/70 font-extralight" %> tour--time-entry-duration">
    <% if time_entry.running? %>
      <div data-controller="clock-timer"
        data-clock-timer-started-at-value="<%= format_datetime_to_momentjs(time_entry.started_at) %>"
        data-clock-timer-logged-time-in-minutes-value="<%= time_entry.total_logged_time_in_minutes %>"
        class="relative">
        <%= convert_minutes_to_human_readable_hour(time_entry.total_time) %>
      </div>
    <% else %>
      <%= convert_minutes_to_human_readable_hour(time_entry.total_time) %>
    <% end %>
  </div>

  <div class="join join-horizontal md:join-vertical shrink-0 tour--time-entry-actions overflow-hidden rounded-b-box md:rounded-r-box md:rounded-b-none">
    <% link_classes = "btn join-item btn-ghost min-h-12 grow rounded-none justify-center md:justify-start" %>

    <% if time_entry.running? %>
      <%= link_to stop_time_entry_path(time_entry),
        class: link_classes + " btn-error text-error hover:text-error-content",
        data: { turbo_method: :put }  do %>

        <span class="mr-2"><i class="ti ti-player-stop-filled"></i></span>
        <span class=""><%= t('actions.stop') %></span>
      <% end %>
    <% else %>
      <%= link_to start_time_entry_path(time_entry),
        class: link_classes + "  btn-success  text-success hover:text-success-content",
        data: { turbo_method: :put }  do %>

        <span class="mr-2"><i class="ti ti-player-play-filled"></i></span>
        <span class=""><%= t('actions.start') %></span>
      <% end %>
    <% end %>

    <% link_classes += " "%>

    <%= link_to edit_time_entry_path(time_entry),
      class: link_classes,
      data: { turbo_frame: "time_entry_form" }  do %>

      <span class="mr-2"><%= icon_for(:edit) %></span>
      <span class=""><%= t('actions.edit') %></span>
    <% end %>

    <%= link_to time_entry_path(time_entry),
      class: link_classes,
      data: {
        turbo_frame: "time_entry_form",
        turbo_method: :delete,
        turbo_confirm: t(".confirm_destroy")

      }  do %>

      <span class="mr-2"><%= icon_for(:remove) %></span>
      <span class=""><%= t('actions.remove') %></span>
    <% end %>
  </div>
</div>
